<template>
  <div>
    <el-form ref="form" label-width="80px" :model="userForm" :rules="rules">
      <!-- 客户姓名 -->
      <el-form-item label="客户姓名" prop="cus_name">
        <el-input
          v-model="userForm.cus_name"
          placeholder="请输入客户姓名"
          style="width: 50%"
        />
      </el-form-item>
      <!-- 成员姓名 -->
      <el-form-item label="成员姓名" prop="nick_name">
        <el-input
          v-model="userForm.nick_name"
          placeholder="请输入成员姓名"
          style="width: 50%"
        />
      </el-form-item>
      <!-- 联系电话 -->
      <el-form-item label="联系电话" prop="tel">
        <el-input
          v-model="userForm.tel"
          placeholder="请输入客户联系电话"
          style="width: 50%"
        />
      </el-form-item>
      <!-- 成员性别 -->
      <el-form-item label="成员性别" prop="gender">
        <el-select v-model="userForm.gender" placeholder="请选择性别">
          <el-option label="男" value="male" />
          <el-option label="女" value="female" />
        </el-select>
      </el-form-item>
      <!-- 来源 -->
      <el-form-item label="来源" prop="source">
        <el-select
          v-model="userForm.source"
          placeholder="请选择来源"
          @change="CusSourceChange"
          @focus="getCusSource"
        >
          <el-option
            v-for="item in getCusSourceOptions"
            :key="item.id"
            :label="item.source_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 成员生日 -->
      <el-form-item label="成员生日" prop="birthday">
        <el-date-picker
          v-model="userForm.birthday"
          placeholder="选择日期"
          type="date"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
    </el-form>
    <div class="flex_between">
      <div></div>
      <div>
        <el-button @click="$emit('send')">取 消</el-button>
        <el-button type="primary" @click="userSubmit">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { cusAdd } from '@/api/customer'
  import { getCusSourceList } from '@/api/gustomerGroup'

  export default {
    props: {
      oClearUserForm: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        getCusSourceOptions: [],
        rules: {
          cus_name: [{ required: true }],
          nick_name: [{ required: true }],
          tel: [
            {
              required: true,
            },
          ],
          gender: [{ required: true }],
          source: [{ required: true }],
          birthday: [
            {
              required: true,
            },
          ],
        },
        userForm: {
          cus_name: '', // 客户姓名
          nick_name: '', // 成员姓名
          tel: '', // 联系电话
          gender: '', // 成员性别
          source: '', // 来源
          birthday: '', // 成员生日
        },
        hint: {
          cus_name: '客户姓名',
          nick_name: '成员姓名',
          tel: '联系电话',
          gender: '成员性别',
          source: '来源',
          birthday: '成员生日',
        },
      }
    },
    watch: {
      // 如果 oClearUserForm 为true的话那么初始化 userForm
      oClearUserForm(newValue) {
        if (newValue) {
          this.userForm = {
            cus_name: '',
            tel: '',
            nick_name: '',
            gender: '',
            birthday: '',
          }
        }
      },
    },
    methods: {
      CusSourceChange(e) {
        this.userForm.source = e
      },
      // 获取来源列表
      getCusSource() {
        getCusSourceList().then((e) => {
          this.getCusSourceOptions = e.data
        })
      },
      // 新增用户
      userSubmit() {
        for (let item in this.hint) {
          if (this.userForm[item] == '') {
            this.$message.error(this.hint[item] + '不能为空')
            return
          }
        }

        cusAdd(this.userForm).then((res) => {
          this.$message.success('用户添加成功')
          if (this.oClearUserForm) {
            this.$emit('send', {
              groupId: res.data.id,
              customerId: res.data.user.id,
              childId: res.data.child.id,
            })
          } else {
            this.$emit('send', {
              res,
            })
          }
        })
      },
      demo() {},
    },
  }
</script>

<style scoped>
  .flex_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
